<template>
  <div>
    <div class="colContent progress list-table" style=" ">
      <div class="area-header">
        <span class="area-header-title">{{ $t('出资人跟踪') }}</span>
      </div>
      <el-form ref="queryForm" :model="queryParams" :inline="true">
        <el-form-item :label="$t('基金名称')" prop="fundName">
          <el-input
            v-model="queryParams.fundName"
            :placeholder="$t('基金名称')"
            clearable
            @keyup.enter.native="queryHandle"
          />
        </el-form-item>
        <el-form-item :label="$t('出资人名称')" prop="lpName">
          <el-input
            v-model="queryParams.lpName"
            :placeholder="$t('出资人名称')"
            clearable
            @keyup.enter.native="queryHandle"
          />
        </el-form-item>
        <el-form-item :label="$t('客户类型')" prop="type">
          <dict-select
            v-model="queryParams.type"
            dictionary="lp_type"
          />
        </el-form-item>
        <el-form-item :label="$t('业务经理')" prop="manager">
          <UserSelect
            v-model="queryParams.manager"
            :placeholder="$t('业务经理')"
            clearable
            @keyup.enter.native="queryHandle"
          />
        </el-form-item>
        <el-form-item :label="$t('关注等级')" prop="followLevel">
          <dict-select
            v-model="queryParams.followLevel"
            :placeholder="$t('关注等级')"
            clearable
            dictionary="czr_follow_level"
            @keyup.enter.native="queryHandle"
          />
        </el-form-item>
        <el-form-item :label="$t('跟踪时间')" prop="trackTime">
          <dict-select
            v-model="queryParams.trackTime"
            dictionary="track_time"
          />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" icon="el-icon-search" size="mini" @click="queryHandle">{{ $t("搜索") }}</el-button>
          <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">{{ $t("重置") }}</el-button>
        </el-form-item>
      </el-form>
      <el-row :gutter="10" class="mb8">
        <el-col :span="1.5">
          <el-button
            v-hasPermi="['fund:lpTrack:edit']"
            type="primary"
            icon="el-icon-plus"
            size="mini"
            @click="addHandle"
          >{{ $t("新增") }}</el-button>
        </el-col>
        <el-col :span="1.5">
          <el-button
            v-hasPermi="['fund:lpTrack:export']"
            type="warning"
            icon="el-icon-download"
            size="mini"
            @click="exportHandle"
          >{{ $t('导出') }}
          </el-button>
        </el-col>
      </el-row>
      <el-table ref="table" v-loading="loading" :row-class-name="rowClassName" :data="trackInfoList" max-height="600" border @row-click="rowClick">
        <el-table-column align="center" prop="lpName" :label="$t('出资人名称')" show-overflow-tooltip min-width="180">
          <template slot-scope="scope">
            <router-link
              target="_blank"
              :to="{path:'/fund/lpBase/lpBaseHome',query:{lpId:scope.row.lpId}}"
              class="link_a"
            >{{ scope.row.lpName }}</router-link>
          </template>
        </el-table-column>
        <el-table-column align="center" prop="type" :label="$t('客户类型')" width="90" :formatter="lpTypeFormat" />
        <el-table-column align="center" prop="followLevel" :label="$t('关注等级')" width="90" :formatter="lpLevelFormat" />
        <el-table-column :label="$t('最近一周')" width="250" prop="lastWeek" class-name="alinTop">
          <template slot-scope="scope">
            <div class="progressTimeLine">
              <el-row v-for="(item, index) in scope.row.lastWeek" :key="index">
                <div size="mini" class="progressItem" @click="viewTrack(item)">
                  <div class="tit">
                    <div class="text">{{ $t('详细情况') }}：<div v-html="item.remark" /></div>
                    <div v-if="item.nextPlan" class="text">{{ $t('下一步计划') }}：<div v-html="item.nextPlan" /></div>
                  </div>
                  <el-tag v-if="item.happenType" size="mini">{{ itemTypeFormat(item.happenType) }}</el-tag>
                  <!--                    <el-tag v-if="item.happenType" class="one_line" size="mini">{{ item.happenType }}</el-tag>-->
                  <el-tag v-if="item.trackMode" type="warning" size="mini">{{ trackModeFormat(item.trackMode) }}</el-tag>
                  <div class="bottom">
                    <!--                    <p v-if="item.updateBy" class="peo">{{ item.updateBy.nickName }}</p>-->
                    <p v-if="item.happenDate" class="time">发生时间：{{ parseTime(item.happenDate) }}</p>
                  </div>
                  <div class="bottom">
                    <!--                    <p v-if="item.updateTime" class="peo">{{ $t('修改时间') }}</p>-->
                    <p v-if="item.createTime" class="time">创建时间：{{ item.createTime }}</p>
                  </div>
                  <div v-if="item.fileList && item.fileList.length > 0" class="fileList" style="border-top: 1px solid #eee">
                    <p v-for="file in item.fileList" :key="file.id" style="color: #1890ff" @click.stop="preview(file.id,'view')">{{ file.name }}</p>
                  </div>
                </div>
              </el-row>
            </div>
          </template>
        </el-table-column>
        <el-table-column :label="$t('上一周')" width="250" prop="pastWeek" class-name="alinTop">
          <template slot-scope="scope">
            <div class="progressTimeLine">
              <el-row v-for="(item, index) in scope.row.pastWeek" :key="index">
                <div size="mini" class="progressItem" @click="viewTrack(item)">
                  <div class="tit">
                    <div class="text">{{ $t('详细情况') }}：<div v-html="item.remark" /></div>
                    <div v-if="item.nextPlan" class="text">{{ $t('下一步计划') }}：<div v-html="item.nextPlan" /></div>
                  </div>
                  <el-tag v-if="item.happenType" size="mini">{{ itemTypeFormat(item.happenType) }}</el-tag>
                  <el-tag v-if="item.trackMode" type="warning" size="mini">{{ trackModeFormat(item.trackMode) }}</el-tag>
                  <div class="bottom">
                    <!--                    <p v-if="item.createBy" class="peo">{{ item.createBy.nickName }}</p>-->
                    <p v-if="item.happenDate" class="time">发生时间：{{ parseTime(item.happenDate) }}</p>
                  </div>
                  <div class="bottom">
                    <!--                    <p v-if="item.createTime" class="peo">{{ $t('创建时间') }}</p>-->
                    <p v-if="item.createTime" class="time">创建时间：{{ item.createTime }}</p>
                  </div>
                  <div v-if="item.fileList && item.fileList.length > 0" class="fileList" style="border-top: 1px solid #eee">
                    <p v-for="file in item.fileList" :key="file.id" style="color: #1890ff" @click.stop="preview(file.id,'view')">{{ file.name }}</p>
                  </div>
                </div>
              </el-row>
            </div>
          </template>
        </el-table-column>
        <el-table-column :label="$t('历史三次跟踪')" width="250" prop="historyNearlyThree">
          <template slot-scope="scope">
            <div class="progressTimeLine">
              <el-row v-for="(item, index) in scope.row.historyNearlyThree" :key="index">
                <div size="mini" class="progressItem" @click="viewTrack(item)">
                  <div class="tit">
                    <div class="text">{{ $t('详细情况') }}：<div v-html="item.remark" /></div>
                    <div v-if="item.nextPlan" class="text">{{ $t('下一步计划') }}：<div v-html="item.nextPlan" /></div>
                  </div>
                  <el-tag v-if="item.happenType" size="mini">{{ itemTypeFormat(item.happenType) }}</el-tag>
                  <el-tag v-if="item.trackMode" type="warning" size="mini">{{ trackModeFormat(item.trackMode) }}</el-tag>
                  <div class="bottom">
                    <!--                    <p v-if="item.createBy" class="peo">{{ item.createBy.nickName }}</p>-->
                    <p v-if="item.happenDate" class="time">发生时间：{{ parseTime(item.happenDate) }}</p>
                  </div>
                  <div class="bottom">
                    <!--   <p v-if="item.createTime" class="peo">{{ // $t('创建时间') }}</p>-->
                    <p v-if="item.createTime" class="time">创建时间：{{ item.createTime }}</p>
                  </div>
                  <div v-if="item.fileList && item.fileList.length > 0" class="fileList" style="border-top: 1px solid #eee">
                    <p v-for="file in item.fileList" :key="file.id" style="color: #1890ff" @click.stop="preview(file.id,'view')">{{ file.name }}</p>
                  </div>
                </div>
              </el-row>
            </div>
          </template>
        </el-table-column>
        <el-table-column align="center" prop="specialNotes" :label="$t('特别说明')" width="350" show-overflow-tooltip>
          <template slot-scope="scope">
            <!--            <p style="width: 100%;white-space: normal;overflow: hidden;text-overflow: ellipsis;display: -webkit-box;-webkit-line-clamp: 3;-webkit-box-orient: vertical">-->
            <!--              {{ scope.row.specialNotes }}-->
            <!--            </p>-->
            <el-tooltip effect="dark" :content="scope.row.specialNotes" placement="top">
              <div
                style="width: 100%;white-space: normal;overflow: hidden;text-overflow: ellipsis;display: -webkit-box;-webkit-line-clamp: 5;-webkit-box-orient: vertical"
              >{{ scope.row.specialNotes }}</div>
            </el-tooltip>
          </template>
        </el-table-column>
        <el-table-column :label="$t('全部跟踪信息')" align="center" width="120">
          <template slot-scope="scope">
            <el-button size="mini" class="el-button el-button--text el-button--small" @click="trackList(scope.row)">{{ $t('查看全部') }}</el-button>
          </template>
        </el-table-column>
        <el-table-column :label="$t('业务经理')" align="center" prop="manager" width="90" />
        <el-table-column :label="$t('创建时间')" align="center" prop="createTime" width="110">
          <template slot-scope="scope">
            <span>{{ parseTime(scope.row.createTime) }}</span>
          </template>
        </el-table-column>
      </el-table>
      <pagination
        v-show="total>0"
        :total="total"
        :page.sync="queryParams.pageNum"
        :limit.sync="queryParams.pageSize"
        @pagination="pageChangeHandle"
      />
    </div>

    <el-dialog :title="trackListTitle" :visible.sync="trackListOpen" width="80%" :close-on-click-modal="false" :lock-scroll="false" @close="closeDialog">
      <lp-track-list ref="lpTrackList" :lp-id="lpId" />
    </el-dialog>

    <!-- 添加或修改项目跟踪对话框 -->
    <el-dialog :title="title" :visible.sync="formOpen" :close-on-click-modal="false" custom-class="dialogForm" :lock-scroll="false" append-to-body>
      <lp-track-form ref="lpTrackForm" select-lp />
    </el-dialog>
    <!-- 附件预览  -->
    <OnlinePreview ref="OnlinePreview" :preview-tit="previewTit" />
  </div>
</template>
<script>
import { lpTrackReport } from '@/api/fund/lpTrack/lpTrack'
import LpTrackForm from '@/views/fund/lpTrack/lpTrackForm'
import LpTrackList from '@/views/fund/lpTrack/lpTrackList'
export default {
  components: {
    LpTrackList,
    LpTrackForm
  },
  data() {
    return {
      // table表格数据
      trackInfoList: [],
      // 遮罩层
      loading: false,
      trackListOpen: false,
      // 查看出资人跟踪标题
      trackListTitle: '',
      formOpen: false,
      title: '',
      // 总条数
      total: 0,
      // 事项类型 字典item_type字典
      // 跟踪方式 字典track_mode字典
      trackModeOptions: [],
      myChart: null,
      queryParams: {
        lpName: undefined,
        type: undefined,
        fundName: undefined,
        pageNum: 1,
        pageSize: 10,
        manager: undefined,
        trackTime: undefined,
        followLevel: undefined
      },
      lpId: undefined,
      // 出资人类型
      lpTypeOptions: [],
      previewTit: '',
      happenTypeOptions: [],
      levelOptions: [],
      currentRow: null
    }
  },
  created() {
    this.getDicts('track_mode').then(response => {
      this.trackModeOptions = response.data
    })
    this.getDicts('lp_type').then(response => {
      this.lpTypeOptions = response.data
    })
    this.getDicts('lp_track_type').then(response => {
      this.happenTypeOptions = response.data
    })
    this.getDicts('czr_follow_level').then(response => {
      this.levelOptions = response.data
    })
    this.getList()
  },
  mounted: function() {

  },

  methods: {
    pageChangeHandle() {
      this.getList()
      this.$refs.table.bodyWrapper.scrollTop = 0
    },
    // 事项类型 格式化
    itemTypeFormat(value) {
      debugger
      var val = this.selectDictLabel(this.happenTypeOptions, value)
      if (!val || val === '') val = value
      if (val && val.length > 10) {
        return val.slice(0, 10) + '...'
      }
      return val
    },
    rowClassName({ row }) {
      if (this.currentRow !== null && row.lpId === this.currentRow.lpId) {
        return 'current-row'
      } else {
        return ''
      }
    },
    // 跟踪方式 字典track_mode字典翻译
    trackModeFormat(row) {
      return this.selectDictLabel(this.trackModeOptions, row)
    },
    lpTypeFormat(row) {
      return this.selectDictLabel(this.lpTypeOptions, row.type)
    },
    lpLevelFormat(row) {
      return this.selectDictLabel(this.levelOptions, row.followLevel)
    },
    getList() {
      this.loading = true
      lpTrackReport(this.queryParams).then(response => {
        this.trackInfoList = response.rows
        this.total = response.total
        this.loading = false
      })
    },
    trackList(row) {
      this.trackListOpen = true
      this.trackListTitle = row.lpName + ' - ' + this.$t('出资人跟踪')
      this.lpId = row.lpId
      this.$nextTick(() => {
        // 调用form页面的 init 方法初始化数据
        this.$refs.lpTrackList.getList()
      })
    },
    /** 搜索按钮操作 */
    queryHandle() {
      this.queryParams.pageNum = 1
      this.getList()
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.resetForm('queryForm')
      this.queryHandle()
    },
    /** 导出按钮操作 */
    exportHandle() {
      this.$confirm(this.$t('是否确认导出数据项?'), this.$t('警告'), {
        confirmButtonText: this.$t('确定'),
        cancelButtonText: this.$t('取消'),
        type: 'warning'
      }).then(() => {
        this.downLoadExcel('/fund/lpTrack/export', this.queryParams)
      }).catch(() => {
      })
    },
    viewTrack(item) {
      this.formOpen = true
      this.title = this.$t('客户跟踪')
      this.$nextTick(() => {
        // 调用form页面的 init 方法初始化数据
        this.$refs.lpTrackForm.init(item)
      })
    },
    /** 预览文件 */
    preview(fileId, type) {
      type === 'review' ? this.previewType = 'review' : this.previewType = 'view'
      this.$refs.OnlinePreview.onlinePreviewFile(fileId, type)
    },
    // 关闭dialog时的回调
    closeDialog() {
      this.getList()
    },
    /** 新增按钮操作 */
    addHandle() {
      this.formOpen = true
      this.title = this.$t('客户跟踪')
      this.$nextTick(() => {
        this.$refs.lpTrackForm.init(this.currentRow)
      })
    },
    rowClick(row) {
      if (this.currentRow !== null && this.currentRow.lpId === row.lpId) {
        this.$refs.table.setCurrentRow(null)
        this.currentRow = null
      } else {
        this.$refs.table.setCurrentRow(row)
        this.currentRow = row
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.text{
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}
.track_height {
  height: 25px;
}
.track_height /deep/ .el-alert__content {
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  width: 150px;
  padding: 0;
}
</style>
